{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>股票信息平台</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="{% static 'vendors/mdi/css/materialdesignicons.min.css' %}">
    <link rel="stylesheet" href="{% static 'vendors/base/vendor.bundle.base.css' %}">
    <!-- endinject -->
    <!-- plugin css for this page -->
    <link rel="stylesheet" href="{% static 'vendors/datatables.net-bs4/dataTables.bootstrap4.css' %}">
    <!-- End plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <!-- endinject -->
    <script type="text/javascript" src="{% static 'js/echarts.min.js' %}"></script>
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>

</head>
<body>
<div class="container-scroller">
    <!-- partial:partials/_navbar.html -->
    <nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row mr-1">
        <div class="navbar-brand-wrapper d-flex justify-content-center">
            <div class="navbar-brand-inner-wrapper d-flex justify-content-between align-items-center w-100">
                <a class="navbar-brand brand-logo" href="{% url 'index' %}"><img src="{% static 'images/logo.svg' %}"
                                                                                 alt="logo"/></a>
                <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
                    <span class="mdi mdi-sort-variant"></span>
                </button>
            </div>

        </div>
        <div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">

            <ul class="navbar-nav navbar-nav-right">
                {% if request.user_obj %}
                    <ul class="nav-item nav-profile dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" id="profileDropdown">
                            {#                        <img src="{% static 'images/faces/face5.jpg' %}" alt="profile"/>#}
                            <i class="mdi mdi-account menu-icon"></i>
                            <span class="nav-profile-name">{{ request.user_obj.username }}</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right navbar-dropdown"
                             aria-labelledby="profileDropdown">
                            <li class="dropdown-item">
                                <i class="mdi mdi-settings text-primary"></i>
                                <a href="#">管理中心</a>
                            </li>
                            <li class="dropdown-item">
                                <i class="mdi mdi-logout text-primary"></i>
                                <a href="{% url 'logout' %}">退 出</a>
                            </li>
                        </div>
                    </ul>
                {% else %}
                    <li class="nav-item dropdown mr-4">
                        <a class="nav-link count-indicator dropdown-toggle d-flex justify-content-center align-items-center"
                           href="{% url 'login' %}">
                            <span>登录</span>
                        </a>
                    </li>
                    <li class="nav-item dropdown mr-4">
                        <a class="nav-link count-indicator dropdown-toggle d-flex justify-content-center align-items-center"
                           href="{% url 'register' %}">
                            <span>注册</span>
                        </a>
                    </li>
                {% endif %}
            </ul>
            <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button"
                    data-toggle="offcanvas">
                <span class="mdi mdi-menu"></span>
            </button>
        </div>
    </nav>
    <!-- partial -->
    <div class="container-fluid page-body-wrapper">
        <!-- partial:partials/_sidebar.html -->
        <nav class="sidebar sidebar-offcanvas" id="sidebar">
            <ul class="nav">
                <li id="home" class="nav-item">
                    <a class="nav-link" href={% url 'index' %}>
                        <i class="mdi mdi-home menu-icon"></i>
                        <span class="menu-title">首页</span>
                    </a>
                </li>
                <li id="stock" class="nav-item">
                    <a class="nav-link" href={% url 'stock' %}>
                        <i class="mdi mdi-circle-outline menu-icon"></i>
                        <span class="menu-title">个股</span>
                    </a>
                </li>
                <li id="industry" class="nav-item">
                    <a class="nav-link" href={% url 'industry' %}>
                        <i class="mdi mdi-view-headline menu-icon"></i>
                        <span class="menu-title">行业</span>
                    </a>
                </li>
                <li id="stock_index" class="nav-item">
                    <a class="nav-link" href={% url 'stock_index' %}>
                        <i class="mdi mdi-chart-pie menu-icon"></i>
                        <span class="menu-title">指数</span>
                    </a>
                </li>
                <li id="company" class="nav-item">
                    <a class="nav-link" href={% url 'company' %}>
                        <i class="mdi mdi-grid-large menu-icon"></i>
                        <span class="menu-title">公司</span>
                    </a>
                </li>
                <li id="concept" class="nav-item">
                    <a class="nav-link" href={% url 'concept' %}>
                        <i class="mdi mdi-emoticon menu-icon"></i>
                        <span class="menu-title">概念</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
                        <i class="mdi mdi-account menu-icon"></i>
                        <span class="menu-title">用户中心</span>
                        <i class="menu-arrow"></i>
                    </a>
                    <div class="collapse" id="auth">
                        <ul class="nav flex-column sub-menu">
                            <li class="nav-item"><a class="nav-link" href="{% url 'register' %}"> 注册 </a></li>
                            <li class="nav-item"><a class="nav-link" href="{% url 'login' %}"> 登录 </a>
                            </li>
                            <li class="nav-item"><a class="nav-link" href="{% url 'logout' %}"> 退出 </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li id="qa_chat" class="nav-item">
                    <a class="nav-link" href={% url 'qa_chat' %}>
                        <i class="mdi mdi-android-debug-bridge menu-icon"></i>
                        <span class="menu-title">智能问答</span>
                    </a>
                </li>
            </ul>
        </nav>

        <div class="main-panel">
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-lg-12 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <p class="card-title"><h4>个股行情</h4></p>

                                <div class="row">
                                    <div class="input-group col-xs-12">
                                        <input id="stockCode" type="text" class="form-control file-upload-info"
                                               placeholder="输入股票代码进行检索">

                                        <span class="input-group-append">

                            <button class="file-upload-browse btn btn-primary" type="button"
                                    id="searchBtn">搜索</button>
                        </span>
                                    </div>
                                </div>
                                <div class="new_detail fl">
                                    <p class="card-description"></p>
                                    <div class="row">
                                        <blockquote class="blockquote col-lg-4">
                                            <div class="col-md-4 d-flex align-items-center">
                                                <div  id="hexm_curPrice_wrap">
                                                    <div class="minute_price clearfix" id="quote_header">
                                                        <span id="name"></span>
                                                        <span id="hexm_curPrice"></span>
                                                        <div class="price_details">
                                                            <span id="hexm_float_price"></span>
                                                            <span id="hexm_float_rate"
                                                                  style="font-size: 15px;"></span>
                                                        </div>
                                                    </div>
                                                    <div class="minute_price ting clearfix" id="quote_header2"
                                                         style="display:none">
                                                        <span class="price"><a href="###">停牌</a></span>
                                                    </div>
                                                    <div class="minute_price_ztdt fl">
                                                        <p>涨停：<span class="red" id="tmaxprice"></span>跌停：<span
                                                                class="green" id="tminprice"></span>
                                                        </p>
                                                        <p id="current-time" style="font-family: tahoma"></p>
                                                    </div>
                                                </div>


                                            </div>
                                        </blockquote>

                                        <blockquote class="blockquote   col-lg-7 ">
                                            <div class="col-md-8 d-flex align-items-center">
                                                <ul class="new_trading fl list-arrow">

                                                    <li>
                                                        <span class="jk">今开：<strong class="minus"
                                                                                      id="topenprice"></strong></span>
                                                        <span class="trading_w contract_amount">&nbsp;&nbsp;&nbsp;成交量：<strong
                                                                id="tamount"
                                                                class="plus"></strong>亿</span>
                                                        <span class="trading_t zf">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;振幅：<strong
                                                                id="trange"></strong></span>
                                                    </li>
                                                    <li>
                                                        <span class="zg">最高：<strong id="thighprice"></strong></span>
                                                        <span class="trading_w trading_volume">&nbsp;&nbsp;&nbsp;成交额：<strong
                                                                id="tamounttotal"></strong></span>
                                                        <span class="trading_t hs">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;换手：<strong
                                                                id="tchange"></strong></span>
                                                    </li>
                                                    <li>
                                                        <span class="zd">最低：<strong id="tlowprice"></strong></span>
                                                        <span class="trading_w trading_volume">&nbsp;&nbsp;&nbsp;总市值：<strong
                                                                id="tvalue"></strong>亿</span>
                                                        <span class="trading_t sjl">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;市净率：<strong
                                                                id="tvaluep"></strong></span>
                                                    </li>
                                                    <li>
                                                        <span class="zs">昨收：<strong id="pprice"></strong></span>
                                                        <span class="trading_w trading_volume">流通市值：<strong
                                                                id="flowvalue"></strong>亿</span>
                                                        <span class="trading_t syl">市盈率(动)：<strong
                                                                id="fvaluep"></strong></span>
                                                    </li>

                                                    <li>
                                                        <span class="trading_w trading_volume">表决权差异：<strong
                                                                id="equalRights"></strong></span>
                                                        <span class="trading_t syl">交易状态：<strong
                                                                id="stockStatus"></strong></span>
                                                    </li>
                                                </ul>

                                            </div>
                                        </blockquote>
                                    </div>


                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-5 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">股票一览</h4>
                                <table border="1" class="table table-hover table-bordered"
                                       >
                                    <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>代码</th>
                                        <th>名称</th>
                                    </tr>
                                    </thead>
                                    <tbody id="trs">
                                    {% for obj in tabledata %}
                                        <tr>
                                            <td>{{ forloop.counter }}</td>
                                            <td>{{ obj.code }}</td>
                                            <td>{{ obj.name }}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                                <span >
        <td>
            <button id="prePage" type="button" style="background-color: #f6f6f6;border: none">上一页</button>
        </td>
        <td>
            <input id="currentPage" type="button" style="background-color: #f6f6f6;border: none" value="当前第1页">
        </td>
        <td>
            <button id="nextPage" type="button" style="background-color: #f6f6f6;border: none">下一页</button>
        </td>
    </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body col-lg-12">
                                <div id="container" style="height: 630px"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- content-wrapper ends -->
            <!-- partial:../../partials/_footer.html -->


            <footer class="footer">
                <div class="d-sm-flex justify-content-center justify-content-sm-between">
                    <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">06 组 赵文琳 叶晓萱 秦红 饶书琪 </span>
                    <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"></span>
                </div>
            </footer>


            <!-- partial -->
        </div>
        <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->

<!-- plugins:js -->
<script src="{% static 'vendors/base/vendor.bundle.base.js' %}"></script>
<!-- endinject -->
<!-- Plugin js for this page-->
<script src="{% static 'vendors/chart.js/Chart.min.js' %}"></script>
<script src="{% static 'vendors/datatables.net/jquery.dataTables.js' %}"></script>
<script src="{% static 'vendors/datatables.net-bs4/dataTables.bootstrap4.js' %}"></script>
<!-- End plugin js for this page-->
<!-- inject:js -->
<script src="{% static 'js/off-canvas.js' %}"></script>
<script src="{% static 'js/hoverable-collapse.js' %}"></script>
<script src="{% static 'js/template.js' %}"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="{% static 'js/data-table.js' %}"></script>
<script src="{% static 'js/jquery.dataTables.js' %}"></script>
<script src="{% static 'js/dataTables.bootstrap4.js' %}"></script>
<script type="text/javascript">
    window.onload = function () {
        // 获取导航菜单的DOM元素
        var homeNav = document.getElementById('home');
        var individualNav = document.getElementById('stock');

        // 移除已选中状态的样式类
        homeNav.classList.remove('active');

        // 添加选中状态的样式类
        individualNav.classList.add('active');

        var currentPage = document.getElementById("currentPage").value;
        var intPage = parseInt(currentPage.replace(/[^\d]/g, " "));
        console.log(currentPage.replace(/[^\d]/g, " "))
        // 数据表
        var table = document.getElementById("trs");
        // 页数
        var count = Math.ceil(table.rows.length / 10);
        var $loadBtn = document.getElementById("currentPage");
        var table_length = table.rows.length;
        var search = new Array(table_length);
        for (i = 0; i < table_length; i++) {
            search[i] = i;
        }
        var begin = (intPage - 1) * 10;
        for (var i = 0; i < table.rows.length; i++) {
            table.rows[i].style.display = 'none'
        }
        for (var r = begin; r < begin + 10; r++) {
            table.rows[r].style.display = '';
        }

        function prePage() {
            console.log('pre')
            // 到了第一页无法点击
            if (intPage <= 1) {
                alert("已是第一页！")
                // $("#prePage").attr("disabled", "disabled");
            } else {
                intPage--;
                currentPage = String(intPage);
                $loadBtn.value = "当前第" + currentPage + "页";
                paging();
            }
        }

        function nextPage() {
            console.log('next')
            // 到了最后一页无法点击
            if (intPage >= count) {
                alert("已是最后一页！")
            } else {
                intPage++;
                currentPage = String(intPage);
                $loadBtn.value = "当前第" + currentPage + "页";
                paging();
            }
        }

        function paging() {
            var begin = (intPage - 1) * 10;
            for (var i = 0; i < search.length; i++) {
                table.rows[search[i]].style.display = 'none'
            }
            for (var r = begin; r < begin + 10; r++) {
                if (r >= search.length) {
                    break;
                }
                table.rows[search[r]].style.display = '';
            }
        }

        document.getElementById("prePage").addEventListener('click', prePage);
        document.getElementById("nextPage").addEventListener('click', nextPage);

        var stock_rank_data = [{{ stock_rank_data|safe }}][0]
        console.log(stock_rank_data)
        var myChart = echarts.init(document.getElementById('container'));
        var option = {
            title: {
                text: '股票排名情况'
            },
            tooltip: {},
            xAxis: {
                type: 'value',
                name: '排名'
            },
            yAxis: {
                type: 'category',
                name: '股票名称',
                data: stock_rank_data.map(item => item.stock)
            },
            series: [{
                type: 'bar',
                data: stock_rank_data.map(item => item.rank),
                label: {
                    show: true,
                    position: 'right', // 标签显示在柱形的右侧
                    textStyle: {
                        color: '#3b82f4' // 设置数值标签颜色为蓝色
                    },
                    formatter: '{c}' // 显示数值
                },
                itemStyle: {
                    color: '#3b82f4' // 设置柱形颜色为蓝色
                }
            }]
        };
        myChart.setOption(option)
    }

    {#    点击搜索按钮实时爬取股票数据并展示#}
    const searchBtn = document.getElementById('searchBtn');
    const stockInput = document.getElementById('stockCode');

    const mcElement = document.getElementById("name");
    const xjElement = document.getElementById("hexm_curPrice");
    const zjElement = document.getElementById("hexm_float_price");
    const zzlElement = document.getElementById("hexm_float_rate");
    const ztElement = document.getElementById("tmaxprice");
    const dtElement = document.getElementById("tminprice");
    const jkElement = document.getElementById("topenprice");
    const cjlElement = document.getElementById("tamount");
    const zfElement = document.getElementById("trange");
    const zgElement = document.getElementById("thighprice");
    const cjeElement = document.getElementById("tamounttotal");
    const hsElement = document.getElementById("tchange");
    const zdElement = document.getElementById("tlowprice");
    const zszElement = document.getElementById("tvalue");
    const sjlElement = document.getElementById("tvaluep");
    const zsElement = document.getElementById("pprice");
    const ltszElement = document.getElementById("flowvalue");
    const sylElement = document.getElementById("fvaluep");
    const bjqcyElement = document.getElementById("equalRights");
    const jyztElement = document.getElementById("stockStatus");

    searchBtn.addEventListener('click', () => {
        const stockCode = stockInput.value;
        if (stockCode.trim() === '') {
            return;
        }
        fetch('/app01/stock_crawl/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({stockCode})
        })
            .then(response => response.json())
            .then(data => {
                console.log(data);
                mcElement.textContent = data.response['items']['name'];
                xjElement.textContent = data.response['items']['10'];
                zjElement.textContent = data.response['items']['264648'];
                zzlElement.textContent = data.response['items']['199112'];
                ztElement.textContent = data.response['items']['69'];
                dtElement.textContent = data.response['items']['70'];
                jkElement.textContent = data.response['items']['8'];
                cjlElement.textContent = (data.response['items']['13'] / 10000).toFixed(2);
                cjeElement.textContent = (data.response['items']['19'] / 100000000).toFixed(2)
                cjlElement.textContent = (data.response['items']['13'] / 10000).toFixed(2);
                hsElement.textContent = data.response['items']['1968584'];
                zdElement.textContent = data.response['items']['9'];
                zszElement.textContent = (data.response['items']['3541450'] / 100000000).toFixed(2);
                sjlElement.textContent = data.response['items']['1149395'];
                zsElement.textContent = data.response['items']['6'];
                ltszElement.textContent = (data.response['items']['3475914'] / 100000000).toFixed(2);
                sylElement.textContent = data.response['items']['2942'];
                bjqcyElement.textContent = data.response['items']['vote_diff'];
                jyztElement.textContent = data.response['items']['stockStatus'];
            })
            .catch(error => {
                console.error('发生错误', error)
            })
    });

</script>

<script>
    function displayCurrentTime() {
        var currentTime = new Date();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();

        var formattedTime = hours + ":" + addLeadingZero(minutes) + ":" + addLeadingZero(seconds);
        document.getElementById("current-time").textContent = formattedTime;
    }

    function addLeadingZero(number) {
        return number < 10 ? "0" + number : number;
    }

    setInterval(displayCurrentTime, 1000); // 更新时间的间隔为每秒钟
</script>
<!-- End custom js for this page-->
</body>

</html>


